<template>
  <div class="factory-page-container factory-tmpl-item">
    <template v-if="list.length">
      <div class="factory-title">
        <h2>
          <icon-svg name="iconFacTmpl"></icon-svg>
          {{ grpFilter.tmplNm }}
        </h2>
        <p>{{ grpFilter.tmplCmnt }}</p>
        <div class="factory-handler clearfix">
          <el-button size="mini" @click="editTmpl">
            <icon-svg name="iconFacEdit"></icon-svg>
            编辑
          </el-button>
          <el-button size="mini" @click="deleteTmpl">
            <icon-svg name="iconDelete"></icon-svg>
            删除
          </el-button>
        </div>
      </div>
      <ul class="factory-wrap tmpl-wrap clearfix tag-scrollbar">
        <li v-for="(item, index) in list" :key="index">
          <el-dropdown>
            <i class="el-icon-more"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-edit" @click.native="handleEdit(item)">
                编辑
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-close" @click.native="handleDelete(item)">
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="grp-title">
            {{ item.mainGrp.groupName }}
          </div>
          <el-row>
            <el-col :span="12" align="center">
              <img :src="grpSrc[item.mainGrp.graphType]" />
            </el-col>
            <el-col :span="12">
              <template v-if="item.mainGrp.groupTyp === 'enum'">
                <template v-if="Number(item.mainGrp.valueType) === 3">
                  <!-- 标识型 -->
                  <div class="list-item">
                    0 ： 否
                  </div>
                  <div class="list-item">
                    1 ： 是
                  </div>
                </template>
                <!-- 显示枚举值 -->
                <template v-else>
                  <template v-for="(listItem, index2) in item.mainGrp.enums">
                    <div :key="listItem.cdVal" class="list-item" v-if="index2 < 4">
                      {{ listItem.cdVal }} ： {{ listItem.cdDesc }}
                    </div>
                  </template>
                  <div class="list-item ellipsis" v-if="item.mainGrp.enums.length > 4">。。。</div>
                </template>
              </template>
              <template v-else>
                <template v-for="(listItem, index3) in item.mainGrp.rangeInfo">
                  <div :key="index3" class="list-item" v-if="index3 < 4">
                    区间{{ index3 + 1 }} ： {{ format(item, listItem) }}
                  </div>
                </template>
                <div class="list-item ellipsis" v-if="Object.keys(item.mainGrp.rangeInfo).length > 4">。。。</div>
              </template>
            </el-col>
          </el-row>
        </li>
      </ul>
    </template>
    <div class="no-records" v-else>
      <template v-if="!loading">
        <img src="~@/assets/img/no_records.png" /><br />
        暂无内容
      </template>
      <div class="loading-box" v-else v-loading="loading" element-loading-spinner="el-icon-loading"></div>
    </div>
    <tag-tmpl-drawer ref="tmplDrawer" @callback="resetTmpl"></tag-tmpl-drawer>
    <cust-drawer ref="custDrawer" @callback="resetGrpFilter"></cust-drawer>
  </div>
</template>

<script>
import custDrawer from '../factory-cust-drawer'
export default {
  props: {
    grpFilter: {
      // 模板详情
      type: Object,
      required: true,
      default: () => {}
    }
  },
  components: { custDrawer },
  computed: {
    list() {
      return this.grpFilter.tmplJson ? JSON.parse(this.grpFilter.tmplJson) : []
    }
  },
  data() {
    return {
      loading: false,
      grpSrc: {
        bar: require('@/assets/img/bar.png'),
        pie: require('@/assets/img/pie.png'),
        circle: require('@/assets/img/circle.png'),
        stack: require('@/assets/img/stack.png'),
        heat: require('@/assets/img/heat.png')
      }
    }
  },
  methods: {
    setLoading(arg) {
      this.loading = arg
    },
    editTmpl() {
      this.$refs.tmplDrawer.showDrawer(this.grpFilter)
    },
    resetTmpl() {
      this.$parent.getResults()
    },
    deleteTmpl() {
      this.$confirm(`确定删除模板【${this.grpFilter.tmplNm}】？`).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$ajax({
          url: this.$ajax.setUrl(`ast/astTagImageTmpl/${this.grpFilter.tmplId}`),
          method: 'delete',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$message.success(data.msg)
            this.$emit('callback', {})
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      })
    },
    handleEdit(item) {
      let params = {
        index: item.grpId,
        type: 'edit',
        mainGrp: {
          tagNm: item.mainGrp.tagNm,
          groupName: item.mainGrp.groupName,
          tagCode: item.mainGrp.labId,
          valueType: item.mainGrp.valueType,
          labTbl: item.mainGrp.labTbl,
          labFldMap: item.mainGrp.labFldMap,
          labGrps: item.mainGrp.labGrps,
          rangeInfo: item.mainGrp.rangeInfo,
          graphType: item.mainGrp.graphType,
          enums: item.mainGrp.enums,
          enumType: item.mainGrp.enumType,
          enumVal: item.mainGrp.enumVal
        }
      }
      if (item.subGrp && item.subGrp.labId) {
        params.subGrp = {
          tagNm: item.mainGrp.tagNm,
          groupName: item.mainGrp.groupName,
          tagCode: item.mainGrp.labId,
          valueType: item.mainGrp.valueType,
          labTbl: item.mainGrp.labTbl,
          labFldMap: item.mainGrp.labFldMap,
          labGrps: item.mainGrp.labGrps,
          rangeInfo: item.mainGrp.rangeInfo,
          graphType: item.mainGrp.graphType,
          enums: item.mainGrp.enums
        }
      }
      this.$refs.custDrawer.showDrawer(params)
    },
    handleDelete(item) {
      this.$confirm(`确定删除模板内容${item.mainGrp.groupName}？`).then(() => this.resetGrpFilter(item, -1))
    },
    resetGrpFilter(result, deleteTag = 0) {
      let grpFilter = JSON.parse(this.grpFilter.tmplJson)
      const index = grpFilter.findIndex(item => item.grpId === result.grpId)
      if (deleteTag < 0) grpFilter.splice(index, 1)
      else grpFilter.splice(index, 1, result)
      let params = {
        tmplCmnt: this.grpFilter.tmplCmnt,
        tmplId: this.grpFilter.tmplId,
        tmplJson: JSON.stringify(grpFilter),
        tmplNm: this.grpFilter.tmplNm
      }
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagImageTmpl'),
        method: 'put',
        data: this.$ajax.setData(params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success(data.msg)
          this.$emit('callback', params)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    format(item, data) {
      if (item.mainGrp.valueType == '6' || item.mainGrp.valueType == '7') {
        return data.replace(/-/g, ' -∞').replace(/[+]/g, ' +∞')
      } else {
        return data
      }
    }
  }
}
</script>

<style lang="scss">
.factory-tmpl-item {
  padding: 0 20px;
  .factory-title {
    h2,
    p {
      float: left;
      max-width: calc((100% - 200px) / 2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  li {
    width: 23%;
    height: 200px;
    margin: 20px 1%;
    padding: 20px;
    float: left;
    background-color: #fff;
    box-shadow: 2px 2px 5px #ddd;
    position: relative;
  }
  .el-dropdown {
    font-size: 20px;
    color: #aaa;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 999;
  }
  .grp-title {
    font-size: 16px;
    font-weight: 700;
  }
  img {
    width: 90%;
    margin-top: 10px;
  }
  .list-item {
    margin-top: 15px;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ellipsis {
    margin-top: 10px;
  }
  .no-records {
    font-size: 17px;
    text-align: center;
    img {
      width: 250px;
      margin: 20px 0 10px 0;
    }
  }
  .loading-box {
    height: 300px;
    font-size: 30px;
  }
  .tmpl-wrap {
    background-color: #f0f4f7;
  }
}
</style>
